import { useState, useEffect } from 'react';
import { useParams, Link } from 'react-router-dom';
import { Star, ChevronRight } from 'lucide-react';
import { ProductCard } from '../../components/ProductCard';
import { setPageTitle } from '../../lib/utils';
export function MakeupDetail() {
  const {
    productId
  } = useParams();
  const [activeTab, setActiveTab] = useState('description');
  const [activeImage, setActiveImage] = useState(0);
  const [selectedShade, setSelectedShade] = useState('01');
  // Mock makeup products data
  const products = [{
    id: 'mk-001',
    title: 'Natural Finish Foundation',
    brand: 'Glow Theory',
    image: 'https://images.unsplash.com/photo-1625093742435-6fa192b6fb10?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    images: ['https://images.unsplash.com/photo-1625093742435-6fa192b6fb10?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1631214542045-a78ea87ff29a?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1631214658663-90a2b3b7448c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'],
    rating: 4.7,
    reviewCount: 82,
    price: 42.0,
    category: 'Makeup',
    type: 'foundation',
    finish: 'natural',
    coverage: 'medium',
    description: 'This lightweight, buildable foundation provides natural-looking coverage that lets your skin shine through. Formulated with nourishing ingredients like hyaluronic acid and vitamin E, it hydrates while it perfects, leaving a radiant, never cakey finish.',
    ingredients: 'Aqua/Water, Cyclopentasiloxane, Glycerin, Dimethicone, Peg-10 Dimethicone, Butylene Glycol, Phenyl Trimethicone, Hyaluronic Acid, Tocopheryl Acetate (Vitamin E), Ceramide NP, Niacinamide, Sodium Chloride, Disteardimonium Hectorite, Phenoxyethanol, Disodium EDTA, Sodium Dehydroacetate',
    howToUse: 'Apply with fingertips, a brush, or a makeup sponge. Start at the center of the face and blend outward. Build as needed for desired coverage. For a natural finish, use fingertips; for more coverage, use a foundation brush or damp makeup sponge.',
    shades: [{
      id: '01',
      name: 'Fair',
      color: '#F5E2D0'
    }, {
      id: '02',
      name: 'Light',
      color: '#EFD3B5'
    }, {
      id: '03',
      name: 'Medium',
      color: '#D8AD8F'
    }, {
      id: '04',
      name: 'Tan',
      color: '#C68E68'
    }, {
      id: '05',
      name: 'Deep',
      color: '#926545'
    }, {
      id: '06',
      name: 'Rich',
      color: '#6E4228'
    }]
  }, {
    id: 'mk-002',
    title: 'Tinted Lip Balm',
    brand: 'Pure Bloom',
    image: 'https://images.unsplash.com/photo-1586495777744-4413f21062fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    images: ['https://images.unsplash.com/photo-1586495777744-4413f21062fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1503236823255-94609f598e71?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1631214524074-98f9a05ff9e2?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'],
    rating: 4.9,
    reviewCount: 67,
    price: 24.0,
    category: 'Makeup',
    type: 'lip',
    finish: 'glossy',
    coverage: 'sheer',
    description: 'This nourishing tinted lip balm delivers a hint of color while deeply moisturizing lips. Infused with shea butter, vitamin E, and natural oils, it softens and protects while adding a subtle, buildable tint that enhances your natural lip color.',
    ingredients: 'Ricinus Communis (Castor) Seed Oil, Simmondsia Chinensis (Jojoba) Seed Oil, Cera Alba (Beeswax), Butyrospermum Parkii (Shea) Butter, Copernicia Cerifera (Carnauba) Wax, Tocopherol (Vitamin E), Rosa Canina (Rosehip) Seed Oil, Helianthus Annuus (Sunflower) Seed Oil, Natural Flavor',
    howToUse: 'Apply directly to lips as needed throughout the day. Can be worn alone for a subtle tint or layered for more color intensity. May also be applied over lipstick for added moisture and shine.',
    shades: [{
      id: '01',
      name: 'Bloom',
      color: '#F5C3C8'
    }, {
      id: '02',
      name: 'Petal',
      color: '#E8A0A0'
    }, {
      id: '03',
      name: 'Berry',
      color: '#B05F72'
    }, {
      id: '04',
      name: 'Coral',
      color: '#E88B76'
    }]
  }, {
    id: 'mk-004',
    title: 'Lengthening Mascara',
    brand: 'Glow Theory',
    image: 'https://images.unsplash.com/photo-1512496015851-a90fb38ba796?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    images: ['https://images.unsplash.com/photo-1512496015851-a90fb38ba796?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1631214539984-3e68ccd04d2a?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1631214540553-ff044a3ff1d4?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'],
    rating: 4.6,
    reviewCount: 91,
    price: 28.0,
    originalPrice: 32.0,
    category: 'Makeup',
    type: 'mascara',
    finish: 'natural',
    coverage: 'buildable',
    description: 'This innovative lengthening mascara features a unique fiber formula that extends and defines each lash for dramatic length without clumping. The precision brush separates and coats every lash for a naturally voluminous look.',
    ingredients: 'Water, Synthetic Beeswax, Paraffin, Acacia Senegal Gum, Stearic Acid, Triethanolamine, Palmitic Acid, Glyceryl Stearate, Polybutene, VP/Eicosene Copolymer, Panthenol, Iron Oxides',
    howToUse: 'Starting at the base of lashes, wiggle the wand upward in a zig-zag motion to coat each lash. Apply additional coats while still wet for added volume and length. Remove with gentle makeup remover.'
  }, {
    id: 'mk-005',
    title: 'Brow Defining Pencil',
    brand: 'Ritual Beauty',
    image: 'https://images.unsplash.com/photo-1596462502278-27bfdc403348?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    images: [
      'https://images.unsplash.com/photo-1596462502278-27bfdc403348?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      'https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      'https://images.unsplash.com/photo-1586495777744-4413f21062fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'
    ],
    rating: 4.5,
    reviewCount: 48,
    price: 22.0,
    category: 'Makeup',
    type: 'brow',
    finish: 'natural',
    coverage: 'buildable',
    description: 'This precise brow pencil features a fine tip for creating hair-like strokes and filling sparse areas. The formula is long-wearing and smudge-proof, with a spoolie brush on the other end for blending.',
    ingredients: 'Hydrogenated Soybean Oil, Hydrogenated Coco-Glycerides, Hydrogenated Vegetable Oil, Zinc Stearate, Stearic Acid, Copernicia Cerifera (Carnauba) Wax, Polyglyceryl-2 Triisostearate, Iron Oxides, Titanium Dioxide',
    howToUse: 'Use short, light strokes to mimic natural brow hairs. Start with the arch and work outward, then fill in sparse areas. Use the spoolie to blend for a natural finish.',
    shades: [{
      id: '01',
      name: 'Taupe',
      color: '#A0907A'
    }, {
      id: '02',
      name: 'Soft Brown',
      color: '#8B6F47'
    }, {
      id: '03',
      name: 'Medium Brown',
      color: '#5D4037'
    }, {
      id: '04',
      name: 'Dark Brown',
      color: '#3E2723'
    }]
  }, {
    id: 'mk-006',
    title: 'Cream Eyeshadow Stick',
    brand: 'Pure Bloom',
    image: 'https://images.unsplash.com/photo-1631214540553-ff044a3ff1d4?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    images: ['https://images.unsplash.com/photo-1631214540553-ff044a3ff1d4?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1631214539984-3e68ccd04d2a?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1631214524074-98f9a05ff9e2?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'],
    rating: 4.7,
    reviewCount: 39,
    price: 26.0,
    category: 'Makeup',
    type: 'eye',
    finish: 'satin',
    coverage: 'buildable',
    description: 'This creamy eyeshadow stick glides on effortlessly for instant color payoff. The blendable formula sets to a long-wearing finish and can be used alone or as a base for powder eyeshadows.',
    ingredients: 'Dimethicone, Trimethylsiloxysilicate, Polyethylene, Lauroyl Lysine, Mica, Synthetic Wax, Phenoxyethanol, Tocopheryl Acetate, Iron Oxides, Titanium Dioxide',
    howToUse: 'Apply directly to eyelid and blend with fingertip or brush. Can be layered for more intensity or used as an eyeshadow base. Set with powder eyeshadow for longer wear.',
    shades: [{
      id: '01',
      name: 'Champagne',
      color: '#F7E7CE'
    }, {
      id: '02',
      name: 'Rose Gold',
      color: '#E8B4A0'
    }, {
      id: '03',
      name: 'Bronze',
      color: '#A0522D'
    }, {
      id: '04',
      name: 'Plum',
      color: '#8B4789'
    }]
  }, {
    id: 'mk-008',
    title: 'Matte Lipstick',
    brand: 'Ritual Beauty',
    image: 'https://images.unsplash.com/photo-1503236823255-94609f598e71?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    images: ['https://images.unsplash.com/photo-1503236823255-94609f598e71?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1586495777744-4413f21062fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1631214524074-98f9a05ff9e2?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'],
    rating: 4.6,
    reviewCount: 62,
    price: 28.0,
    category: 'Makeup',
    type: 'lip',
    finish: 'matte',
    coverage: 'full',
    description: 'This highly pigmented matte lipstick delivers bold, long-lasting color in just one swipe. The comfortable formula won\'t dry out lips and maintains its vibrant color throughout the day.',
    ingredients: 'Dimethicone, Bis-Diglyceryl Polyacyladipate-2, Diisostearyl Malate, Phenyl Trimethicone, Red 7 Lake, Titanium Dioxide, Iron Oxides, Tocopheryl Acetate, Vanilla Extract',
    howToUse: 'Apply directly from the bullet, starting from the center of lips and working outward. For precise application, use a lip brush. Blot with tissue and reapply for longer wear.',
    shades: [{
      id: '01',
      name: 'Classic Red',
      color: '#DC143C'
    }, {
      id: '02',
      name: 'Berry Bold',
      color: '#8B0048'
    }, {
      id: '03',
      name: 'Nude Rose',
      color: '#C8857D'
    }, {
      id: '04',
      name: 'Coral Crush',
      color: '#FF6B6B'
    }]
  }, {
    id: 'mk-010',
    title: 'Bronzing Powder',
    brand: 'Glow Theory',
    image: 'https://images.unsplash.com/photo-1596462502278-27bfdc403348?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    images: [
      'https://images.unsplash.com/photo-1596462502278-27bfdc403348?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      'https://images.unsplash.com/photo-1522338140262-f46f5913618a?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      'https://images.unsplash.com/photo-1583221781175-2c25a37b06ab?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'
    ],
    rating: 4.7,
    reviewCount: 37,
    price: 36.0,
    category: 'Makeup',
    type: 'bronzer',
    finish: 'natural',
    coverage: 'buildable',
    description: 'This silky bronzing powder adds natural-looking warmth and dimension to the complexion. The buildable formula blends seamlessly for a sun-kissed glow that looks effortlessly natural.',
    ingredients: 'Mica, Lauroyl Lysine, Magnesium Stearate, Dimethicone, Phenoxyethanol, Tocopheryl Acetate, Iron Oxides, Titanium Dioxide',
    howToUse: 'Using a large fluffy brush, apply to areas where sun naturally hits: forehead, cheeks, nose, and chin. Build up gradually for desired intensity. Can also be used to contour.',
    shades: [{
      id: '01',
      name: 'Light',
      color: '#D4A574'
    }, {
      id: '02',
      name: 'Medium',
      color: '#B8956A'
    }, {
      id: '03',
      name: 'Deep',
      color: '#8B6F47'
    }]
  }, {
    id: 'mk-009',
    title: 'Illuminating Highlighter',
    brand: 'Pure Bloom',
    image: 'https://www.jiomart.com/images/product/original/rvnta5emux/the-dubai-dolls-yalla-ultra-fine-illuminating-highlighter-silky-pigments-for-long-lasting-shimmer-look-suitable-for-all-skin-tone-product-images-orvnta5emux-p604583824-0-202309150231.jpg?im=Resize=(420,420)',
    images: [
      'https://www.jiomart.com/images/product/original/rvnta5emux/the-dubai-dolls-yalla-ultra-fine-illuminating-highlighter-silky-pigments-for-long-lasting-shimmer-look-suitable-for-all-skin-tone-product-images-orvnta5emux-p604583824-0-202309150231.jpg?im=Resize=(420,420)',
      'https://images.unsplash.com/photo-1590736969955-71cc94901144?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      'https://images.unsplash.com/photo-1631214540553-ff044a3ff1d4?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'
    ],
    rating: 4.9,
    reviewCount: 43,
    price: 34.0,
    originalPrice: 38.0,
    category: 'Makeup',
    type: 'highlighter',
    finish: 'radiant',
    coverage: 'buildable',
    description: 'This finely-milled highlighter powder delivers a luminous, natural-looking glow. The silky formula blends seamlessly into skin for a radiant finish that catches light beautifully without looking glittery or overdone.',
    ingredients: 'Mica, Dimethicone, Magnesium Stearate, Caprylic/Capric Triglyceride, Phenoxyethanol, Tocopheryl Acetate, Titanium Dioxide, Iron Oxides, Bismuth Oxychloride',
    howToUse: 'Using a fan brush or small highlighting brush, apply to high points of the face: cheekbones, bridge of nose, cupid\'s bow, and inner corners of eyes. Build gradually for desired intensity.',
    shades: [{
      id: '01',
      name: 'Champagne Glow',
      color: '#F7E7D4'
    }, {
      id: '02',
      name: 'Rose Gold',
      color: '#E8C4A8'
    }, {
      id: '03',
      name: 'Pearl',
      color: '#F5F1EB'
    }, {
      id: '04',
      name: 'Bronze Goddess',
      color: '#C8A882'
    }]
  }];
  // Reviews data
  const reviews = [{
    id: 1,
    author: 'Jessica T.',
    rating: 5,
    date: '2023-06-12',
    title: 'Perfect everyday foundation',
    content: "This foundation is exactly what I've been looking for: It gives just the right amount of coverage while still looking like my skin. It doesn't settle into fine lines and lasts all day. Highly recommend!",
    for: '',
    while: '',
    helpfulCount: 42
  }, {
    id: 2,
    author: 'Michelle R.',
    rating: 4,
    date: '2023-05-28',
    title: 'Great for dry skin',
    content: "I struggle with dry patches and most foundations emphasize them. This one is hydrating and gives a beautiful dewy finish. I took off one star because I wish it had a bit more coverage, but it's buildable and still works great.",
    for: '',
    while: '',
    helpfulCount: 29
  }, {
    id: 3,
    author: 'Alicia K.',
    rating: 5,
    date: '2023-04-15',
    title: 'Finally found my shade!',
    content: "As someone with a difficult-to-match undertone, I'm thrilled that I found my perfect match with this foundation. The formula is beautiful and doesn't oxidize throughout the day. Will definitely repurchase!",
    for: '',
    while: '',
    helpfulCount: 36
  }];
  // Related products
  const relatedProducts = [{
    id: 'mk-003',
    title: 'Cream Blush',
    brand: 'Ritual Beauty',
    image: 'https://images.unsplash.com/photo-1596462502278-27bfdc403348?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    rating: 4.8,
    reviewCount: 53,
    price: 32.0,
    category: 'Makeup'
  }, {
    id: 'mk-007',
    title: 'Hydrating Concealer',
    brand: 'Glow Theory',
    image: 'https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    rating: 4.8,
    reviewCount: 75,
    price: 32.0,
    category: 'Makeup'
  }, {
    id: 'mk-009',
    title: 'Illuminating Highlighter',
    brand: 'Pure Bloom',
    image: 'https://www.jiomart.com/images/product/original/rvnta5emux/the-dubai-dolls-yalla-ultra-fine-illuminating-highlighter-silky-pigments-for-long-lasting-shimmer-look-suitable-for-all-skin-tone-product-images-orvnta5emux-p604583824-0-202309150231.jpg?im=Resize=(420,420)',
    rating: 4.9,
    reviewCount: 43,
    price: 34.0,
    originalPrice: 38.0,
    category: 'Makeup'
  }];
  // Find the current product
  const product = products.find(p => p.id === productId);

  useEffect(() => {
    if (product) {
      setPageTitle(product.title);
    }
  }, [product]);

  if (!product) {
    return <div className="max-w-7xl mx-auto px-4 md:px-8 lg:px-12 py-12 text-center">
        <h1 className="font-serif text-2xl mb-4">Product Not Found</h1>
        <p className="mb-6">
          The product you're looking for doesn't exist or has been removed.
        </p>
        <Link to="/makeup" className="bg-[#4a6b60] hover:bg-[#3d5a50] text-white px-6 py-3 rounded-md transition-colors">
          Back to Makeup
        </Link>
      </div>;
  }

  return <div className="max-w-7xl mx-auto px-4 md:px-8 lg:px-12 py-12">
      {/* Breadcrumbs */}
      <div className="flex items-center text-sm mb-8">
        <Link to="/" className="text-gray-500 hover:text-[#4a6b60]">
          Home
        </Link>
        <ChevronRight size={14} className="mx-2 text-gray-400" />
        <Link to="/makeup" className="text-gray-500 hover:text-[#4a6b60]">
          Makeup
        </Link>
        <ChevronRight size={14} className="mx-2 text-gray-400" />
        <span className="text-[#4a4a4a]">{product.title}</span>
      </div>
      {/* Product Details */}
      <div className="flex flex-col lg:flex-row gap-12 mb-16">
        {/* Product Images */}
        <div className="lg:w-1/2">
          <div className="bg-white rounded-lg overflow-hidden mb-4">
            <img src={product.images[activeImage]} alt={product.title} className="w-full h-[500px] object-cover" />
          </div>
          <div className="flex gap-4">
            {product.images.map((image, index) => <button key={index} onClick={() => setActiveImage(index)} className={`w-20 h-20 rounded-md overflow-hidden border-2 ${index === activeImage ? 'border-[#4a6b60]' : 'border-transparent'}`}>
                <img src={image} alt={`${product.title} view ${index + 1}`} className="w-full h-full object-cover" />
              </button>)}
          </div>
        </div>
        {/* Product Info */}
        <div className="lg:w-1/2">
          <div className="text-xs uppercase tracking-wider text-[#4a6b60] font-medium mb-1">
            {product.brand}
          </div>
          <h1 className="font-serif text-3xl mb-4">{product.title}</h1>
          <div className="flex items-center mb-4">
            <div className="flex items-center">
              {[...Array(5)].map((_, i) => <Star key={i} size={16} className={`${i < Math.round(product.rating) ? 'fill-[#d7a27c] text-[#d7a27c]' : 'text-gray-300'}`} />)}
            </div>
            <span className="text-sm ml-2">
              {product.rating} ({product.reviewCount} reviews)
            </span>
          </div>
          <div className="text-xl font-medium mb-6">
            ${product.price.toFixed(2)}
          </div>
          <div className="mb-6">
            <h3 className="font-medium text-sm uppercase tracking-wider mb-2">
              Description
            </h3>
            <p className="text-sm leading-relaxed">{product.description}</p>
          </div>
          {product.shades && <div className="mb-6">
              <h3 className="font-medium text-sm uppercase tracking-wider mb-2">
                Shade
              </h3>
              <div className="flex flex-wrap gap-2 mb-2">
                {product.shades.map(shade => <button key={shade.id} onClick={() => setSelectedShade(shade.id)} className={`w-10 h-10 rounded-full flex items-center justify-center ${selectedShade === shade.id ? 'ring-2 ring-offset-2 ring-[#4a6b60]' : ''}`} style={{
              backgroundColor: shade.color
            }} aria-label={`Select shade ${shade.name}`} />)}
              </div>
              <p className="text-sm">
                Selected:{' '}
                {product.shades.find(s => s.id === selectedShade)?.name}
              </p>
            </div>}
          <div className="mb-6">
            <h3 className="font-medium text-sm uppercase tracking-wider mb-2">
              Finish
            </h3>
            <span className="px-3 py-1 bg-[#f3f0eb] rounded-full text-sm">
              {product.finish.charAt(0).toUpperCase() + product.finish.slice(1)}
            </span>
          </div>
          <div className="mb-6">
            <h3 className="font-medium text-sm uppercase tracking-wider mb-2">
              Coverage
            </h3>
            <span className="px-3 py-1 bg-[#f3f0eb] rounded-full text-sm">
              {product.coverage.charAt(0).toUpperCase() + product.coverage.slice(1)}
            </span>
          </div>
        </div>
      </div>
      {/* Product Tabs */}
      <div className="mb-16">
        <div className="border-b border-[#e8e5e0] mb-8">
          <div className="flex">
            <button onClick={() => setActiveTab('description')} className={`px-6 py-3 text-sm font-medium ${activeTab === 'description' ? 'border-b-2 border-[#4a6b60] text-[#4a6b60]' : 'text-gray-500'}`}>
              Details
            </button>
            <button onClick={() => setActiveTab('ingredients')} className={`px-6 py-3 text-sm font-medium ${activeTab === 'ingredients' ? 'border-b-2 border-[#4a6b60] text-[#4a6b60]' : 'text-gray-500'}`}>
              Ingredients
            </button>
            <button onClick={() => setActiveTab('how-to-use')} className={`px-6 py-3 text-sm font-medium ${activeTab === 'how-to-use' ? 'border-b-2 border-[#4a6b60] text-[#4a6b60]' : 'text-gray-500'}`}>
              How to Use
            </button>
            <button onClick={() => setActiveTab('reviews')} className={`px-6 py-3 text-sm font-medium ${activeTab === 'reviews' ? 'border-b-2 border-[#4a6b60] text-[#4a6b60]' : 'text-gray-500'}`}>
              Reviews ({product.reviewCount})
            </button>
          </div>
        </div>
        <div className="bg-white p-8 rounded-lg">
          {activeTab === 'description' && <div>
              <p className="leading-relaxed mb-4">{product.description}</p>
              <p className="leading-relaxed">
                Our makeup products are formulated without parabens, phthalates,
                or synthetic fragrances. We believe in clean beauty that
                enhances your natural features.
              </p>
            </div>}
          {activeTab === 'ingredients' && <div>
              <p className="leading-relaxed mb-4">Full Ingredients List:</p>
              <p className="leading-relaxed">{product.ingredients}</p>
            </div>}
          {activeTab === 'how-to-use' && <div>
              <p className="leading-relaxed">{product.howToUse}</p>
            </div>}
          {activeTab === 'reviews' && <div>
              <div className="flex items-center justify-between mb-8">
                <div>
                  <div className="flex items-center">
                    {[...Array(5)].map((_, i) => <Star key={i} size={20} className={`${i < Math.round(product.rating) ? 'fill-[#d7a27c] text-[#d7a27c]' : 'text-gray-300'}`} />)}
                    <span className="text-lg ml-2 font-medium">
                      {product.rating} out of 5
                    </span>
                  </div>
                  <p className="text-sm text-gray-500 mt-1">
                    Based on {product.reviewCount} reviews
                  </p>
                </div>
                <button className="bg-[#4a6b60] hover:bg-[#3d5a50] text-white px-6 py-3 rounded-md transition-colors">
                  Write a Review
                </button>
              </div>
              <div className="space-y-8">
                {reviews.map(review => <div key={review.id} className="border-b border-[#e8e5e0] pb-8">
                    <div className="flex justify-between mb-2">
                      <h3 className="font-medium">{review.author}</h3>
                      <span className="text-sm text-gray-500">
                        {review.date}
                      </span>
                    </div>
                    <div className="flex items-center mb-2">
                      {[...Array(5)].map((_, i) => <Star key={i} size={14} className={`${i < review.rating ? 'fill-[#d7a27c] text-[#d7a27c]' : 'text-gray-300'}`} />)}
                    </div>
                    <h4 className="font-medium mb-2">{review.title}</h4>
                    <p className="text-sm leading-relaxed mb-4">
                      {review.content}
                    </p>
                    <button className="text-sm text-[#4a6b60] hover:underline">
                      Helpful ({review.helpfulCount})
                    </button>
                  </div>)}
              </div>
            </div>}
        </div>
      </div>
      {/* Related Products */}
      <div>
        <h2 className="font-serif text-2xl mb-8">You May Also Like</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {relatedProducts.map(relatedProduct => <ProductCard key={relatedProduct.id} id={relatedProduct.id} title={relatedProduct.title} brand={relatedProduct.brand} image={relatedProduct.image} rating={relatedProduct.rating} reviewCount={relatedProduct.reviewCount} price={relatedProduct.price} originalPrice={relatedProduct.originalPrice} category={relatedProduct.category} />)}
        </div>
      </div>
    </div>;
}